<template>
  <view>
    <!-- 分类导航栏 -->
    <view class="nav">
      <block v-for="(item , i) in navName" :key="i">
        <view :class="['title', i === active ? 'active' : '']" @click="activeChanged(i)">
          {{item}}
        </view>
      </block>
    </view>
    <!-- 二级页面 -->

    <view class="eat drink" v-if="active === 0">
      <my-record page="eat"></my-record>
      <!-- 附近 -->
      <view class="nearby">
        <unicloud-db v-slot:default="{data, loading, error, options}" collection="eat_nearby" :page-size="pagesize">
          <view v-if="error">{{error.message}}</view>
          <view v-else>
            <view class="drink_navchildren">
              <view class="title-text">
                <uni-section class="title-text-section" title="附近" sub-title="就知道吃" type="line" titleFontSize="17px">
                </uni-section>
                <uni-icons type="more-filled" @click="gotoList('eat_nearby')" class="drink_more"></uni-icons>
              </view>
              <view class="free-WaterfallFlow">

                <view class="flex-wrap" v-for="(item,index) in data" :key="index" v-if="index % 2 != 0">
                  <image mode="widthFix" :src="item.background"></image>
                  <view>
                    <view class="name">
                      {{item.name}}
                    </view>
                    <view class="shopname">
                      {{item.address}}
                    </view>
                  </view>
                  <view>
                    <view class="distance">
                      <uni-icons type="location" color="grey"></uni-icons>
                      {{item.distance}}
                    </view>
                    <view class="price">
                      {{item.price}}
                    </view>
                  </view>
                </view>


                <!-- <view class="flex-wrap" v-for="(item,index) in data" :key="'2-'+index" v-if="index % 2 == 0">
                  <image mode="widthFix" :src="item.background"></image>
                  <view>{{item.name}}</view>
                  <view> {{item.time}} </view>
                </view>
 -->
              </view>
            </view>
          </view>
        </unicloud-db>
      </view>

      <!-- 菜谱 -->
      <view class="nearby">
        <unicloud-db v-slot:default="{data, loading, error, options}" collection="eat_recipe" :page-size="pagesize">
          <view v-if="error">{{error.message}}</view>
          <view v-else>
            <view class="drink_navchildren">
              <view class="title-text">
                <uni-section class="title-text-section" title="菜谱" sub-title="做好吃的" type="line" titleFontSize="17px">
                </uni-section>
                <text class="drink_more">换一批</text>
              </view>

              <view class="drink_nearby_list">
                <view class="recipe_item" v-for="item in data" :key="item._id" @click="show(item)">
                  <view class="item_picture "
                    :style="{'background':'url('+item.img+')','background-size': '100% 100%','background-repeat': 'no-repeat','background-position': 'center'}">
                    <view class="right">
                      <button type="primary" class="recipe_button" size="mini"
                        :style="{'background-color': recipe_button[item.flavor]}">{{item.flavor}}</button>
                    </view>
                  </view>
                  <view class="name_distance">
                    <view class="name">
                      {{item.name}}
                    </view>
                    <view class="bottom">
                      <text>{{item.craft + '·'+ item.time + '·' + item.difficulty}}</text>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </unicloud-db>

      </view>
    </view>

    <view class="drink" v-if="active === 1">
      <my-record page="drink"></my-record>
      <!-- 食谱 -->
      <view class="nearby">
        <unicloud-db v-slot:default="{data, loading, error, options}" collection="drink_recipe" :page-size="pagesize">
          <view v-if="error">{{error.message}}</view>
          <view v-else>
            <view class="drink_navchildren">
              <view class="title-text">
                <uni-section class="title-text-section" title="食谱" sub-title="就知道喝" type="line" titleFontSize="17px">
                </uni-section>
                <uni-icons type="more-filled" @click="gotoList('drink_recipe')" class="drink_more"></uni-icons>
              </view>

              <view class="drink_nearby_list">
                <view class="drink_nearby_item" v-for="item in data" :key="item._id">
                  <view class="item_picture"
                    :style="{'background':'url('+item.img+')','background-size': '100% 100%','background-repeat': 'no-repeat','background-position': 'center'}">

                    <view class="name_distance">
                      <view class="name">
                        {{item.name}}
                      </view>
                      <view class="bottom">
                        <text>{{item.craft + '·'+ item.time + '·' + item.difficulty}}</text>
                      </view>
                    </view>
                    <view class="right">
                      <button type="primary" class="button" size="mini"
                        style="background-color: honeydew;">{{item.flavor}}</button>

                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </unicloud-db>
      </view>
      <!-- 排行榜 -->
      <view class="drink_rank">
        <rank mydb="drink_nearby"></rank>
      </view>

    </view>
    <!-- 数据是玩 -->
    <view class="drink" v-if="active === 2">
      <my-record page="play"></my-record>
      <!-- 附近 -->
      <view class="nearby">
        <unicloud-db v-slot:default="{data, loading, error, options}" collection="play_nearby" :page-size="pagesize">
          <view v-if="error">{{error.message}}</view>
          <view v-else>
            <view class="drink_navchildren">
              <view class="title-text">
                <uni-section class="title-text-section" title="附近" sub-title="就知道喝" type="line" titleFontSize="17px">
                </uni-section>
                <uni-icons type="more-filled" @click="gotoList()" class="drink_more"></uni-icons>
              </view>

              <view class="drink_nearby_list">
                <view class="drink_nearby_item" v-for="item in data" :key="item._id">
                  <view class="item_picture"
                    :style="{'background':'url('+item.background+')','background-size': '100% 100%','background-repeat': 'no-repeat','background-position': 'center'}">

                    <view class="name_distance">
                      <view class="name">
                        {{item.name}}
                      </view>
                      <view class="bottom">
                        <text>{{item.place}}</text>
                      </view>
                    </view>
                    <!--                    <view class="right">
                      <button type="primary" class="button" size="mini">{{item.price}}</button>
                      <view class="distance">
                        <uni-icons type="location"></uni-icons>
                        <text>{{item.distance}}</text>
                      </view>
                    </view> -->
                  </view>
                </view>
              </view>
            </view>
          </view>
        </unicloud-db>
      </view>
      <!-- 排行榜 -->
      <view class="drink_rank">
        <rank mydb="play_nearby"></rank>
      </view>

    </view>
    <!-- 乐 -->
    <view class="happy" v-if="active === 3">
      <my-record page="happy"></my-record>

      <view class="rank box">
        <my-title title="排行榜"></my-title>
        <view class="classify">
          <block v-for="(item , i) in classifyItem" :key="i" class="classify-item">
            <view class="tag">
              <uni-tag :circle="true" :inverted="inverted[i]" :text="item" type="default" @click="setInverted(i)" />
            </view>
          </block>
        </view>
        <view class="rankList">
          <swiper :indicator-dots="false" next-margin="100px">
            <swiper-item v-for="(item, index1) in bookRank" class="rl-swiper-item">
              <view class="book-item" v-for="(book,index2) in item">
                <view class="left">
                  <img :src="book.img" :alt="item.name">
                </view>
                <view class="right">
                  <view class="order">
                    {{4*index1 + index2+1}}. {{book.name}}
                  </view>
                  <view class="name-author">
                    <text>{{book.author}}</text>
                  </view>
                </view>
              </view>
            </swiper-item>
          </swiper>

        </view>
      </view>
      <view class="book box">
        <my-title title="读书" color="#FFEEB3"></my-title>
        <unicloud-db v-slot:default="{data, loading, error, options}" collection="happy_book">
          <view v-if="error">{{error.message}}</view>
          <view v-else>
            <scroll-view scroll-x="true" class="book-scroll">
              <block class="" v-for="(item, i) in data" :key="i">
                <view class="scorll-item">
                  <view class="content">
                    <img :src="item.img" alt="图片">
                    <text class="title">{{item.name}}</text>
                    <text>"都云作者痴，谁解其中味？"</text>
                  </view>
                </view>
              </block>
            </scroll-view>
          </view>
        </unicloud-db>
      </view>
      <view class="movie box ">
        <my-title title="电影" color="#E7D9FF"></my-title>

        <unicloud-db v-slot:default="{data, loading, error, options}" collection="happy_movie">
          <view v-if="error">{{error.message}}</view>
          <view v-else>
            <view class="happy_movie">
              <view class="movie-list" v-for="(item,i) in data" :key="i">
                <view class="movie-item" v-if="i % 2 == 0">
                  <img :src="item.img" alt="图片">
                  <view class="right">
                    <view class="name">
                      {{item.name}}
                    </view>
                    <view class="description">
                      {{item.description}}
                    </view>
                    <view class="score">
                      <view class="rate">
                        <uni-rate value="4" size="20"></uni-rate>
                      </view>
                      <view class="fen">
                        {{item.score}}
                      </view>
                    </view>
                  </view>
                </view>
                <view class="movie-item" v-else>
                  <view class="right_left">
                    <view class="name">
                      {{item.name}}
                    </view>
                    <view class="description">
                      {{item.description}}
                    </view>
                    <view class="score">
                      <view class="fen">
                        {{item.score}}
                      </view>
                      <view class="rate">
                        <uni-rate value="4" size="22"></uni-rate>
                      </view>
                    </view>
                  </view>
                  <img :src="item.img" alt="图片">

                </view>
              </view>

            </view>

          </view>
        </unicloud-db>


      </view>
      <view class="music box">
        <my-title title="音乐" color="#C5E4FC"></my-title>

        <unicloud-db v-slot:default="{data, loading, error, options}" collection="happy_song" :page-size="3">
          <view v-if="error">{{error.message}}</view>
          <view v-else>

            <view class="music_list">
              <view class="music_item" v-for="(item,i) in data" :key="i">
                <uni-icons type="star" size="25"></uni-icons>
                <view class="name">
                  {{item.name}}
                </view>
                <view class="author">
                  {{item.author}}
                </view>
              </view>
            </view>
          </view>
        </unicloud-db>

      </view>
    </view>
    <view class="fin_bottom">
      <text>-----我看过山川湖海，不辜负美食与爱-----</text>
    </view>

  </view>
</template>

<script>
  const drink_db = uniCloud.database()
  export default {
    data() {
      return {
        navName: ['吃', '喝', '玩', '乐'],
        db: '',
        active: 0,
        scollTop: 0,
        recipe_button: {
          "咸鲜": "#D9DCF7",
          "香辣": "#DFE1F0",
          "清淡": "#C4D9CC",
          "咖喱": "#EBE0A7"
        },
        classifyItem: ['读书', '电影', '音乐'],
        pagesize: 4,
        //分类标签是否实心
        inverted: [false, true, true],
        bookRank: [],
      };
    },
    onLoad() {
      this.getBook()
    },
    methods: {
      activeChanged(i) {
        this.active = i
        this.scrollTop = Math.random(); //?????????
      },
      gotoGood(item3) {
        uni.navigateTo({
          url: '/subpkg/buy/buy?cid=' + item3.cid
        })
      },
      gotoList(db) {
        this.db = db;
        uni.navigateTo({
          url: '/subpkg/list/list?db=' + db
        })

        console.log();
      },
      setInverted(i) {
        this.inverted[0] = true
        this.inverted[1] = true
        this.inverted[2] = true
        this.inverted[i] = false;
      },
      getBook() {
        const db = uniCloud.database();
        db.collection('happy_book').get() //获取数据表的信息
          .then(res => {
            let arr = []
            for (let i = 0; i < res.result.data.length; i++) {
              arr.push(res.result.data[i])
              if ((i + 1) % 3 === 0) {
                this.bookRank.push(arr);
                arr = []
              }
            }
            console.log(this.bookRank);
          })
          .catch(err => {
            console.log(err)
            uni.$showMsg()
          })
      },
      show(item) {
        console.log(item);
        uni.showActionSheet({
          title: item.name,
          itemColor: "#bebebe",
          itemList: [item.ingredients],
          success: function(res) {
            // console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
          },
          fail: function(res) {
            console.log(res.errMsg);
          }
        });
      },
    }

  }
</script>

<style lang="scss">
  .nav {
    display: flex;
    justify-content: space-around;
    margin: 10rpx;

    .title {
      font-size: 35rpx;
      line-height: 40px;

      &.active {
        font-size: 40rpx;
        position: relative;
        font-weight: 600;

        &::before {
          content: ' ';
          display: block;
          width: 15px;
          height: 3px;
          background-color: #428687;
          position: absolute;
          left: 0;
          top: 98%;
          transform: translateX(15%);

        }
      }
    }
  }

  // 吃 在app.vue

  // 乐
  .happy {
    .box {
      border-radius: 30rpx;
      box-shadow: 5px 8px 20px #bebebe;
      margin: 30rpx 30rpx;
      background-color: transparent;
    }

    .rank {
      height: 600rpx;

      .classify {
        height: 60rpx;
        display: flex;
        align-items: center;
        padding: 0 20rpx;

        .tag {
          margin: 0 20rpx;
        }
      }

      .rankList {
        height: 480rpx;

        swiper {
          height: 100%;

          .rl-swiper-item {
            display: flex;
            height: 90%;
            display: flex;
            flex-direction: column;
            justify-content: center;
          }
        }
      }

      .book-item {
        display: flex;
        margin-left: 20rpx;
        height: 30%;

        .left {
          width: 25%;
          height: 100%;

          img {
            height: 100%;
            width: 100%;
            border: #428687 1px solid;
          }
        }

        .right {
          box-sizing: border-box;
          padding: 20rpx 0 20rpx 20rpx;
          width: 75%;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-around;

          .name-author {
            font-size: 16rpx;
            color: #bebebe;
          }
        }

        .right {
          .right {
            display: flex;
            justify-content: flex-end;
          }
        }
      }
    }

    .book {

      height: 500rpx;

      .book-scroll {
        white-space: nowrap;
        margin-top: 20rpx;

        // mar;
        .scorll-item {
          display: inline-block;
          text-align: center;
          margin: 20rpx;

          .content {
            display: flex;
            flex-direction: column;


            img {
              border-radius: 10rpx;
              width: 96px;
              height: 135px;
            }

            text {
              width: 96px;
              font-size: 16rpx;
              text-align: left;


            }

            .title {
              font-weight: bold;
            }

          }

        }
      }
    }

    .movie {

      // height: 500rpx;

      .happy_movie {

        .movie-list {

          .movie-item {
            display: flex;
            height: 300rpx;
            margin-top: 5rpx;

            .right {

              .description {
                box-sizing: border-box;
                padding: 10rpx;
                width: 96%;
                height: 60%;
                color: #bebebe;
                justify-content: flex-end;
                text-overflow: ellipsis;
                overflow: auto;
                font-size: 14rpx;
              }

              .score {
                width: 70%;
                display: flex;
                justify-content: space-between;
                font-size: 27rpx;
                color: #ffd900;
                align-items: center;
              }
            }

            .right_left {
              display: flex;
              flex-direction: column;
              align-items: flex-end;
              margin-right: 15rpx;

              .name {}

              .description {
                box-sizing: border-box;
                padding: 10rpx;
                width: 96%;
                height: 60%;
                color: #bebebe;
                justify-content: flex-end;
                text-overflow: ellipsis;
                overflow: auto;
                font-size: 14rpx;
              }

              .score {
                width: 70%;
                display: flex;
                justify-content: space-between;
                font-size: 27rpx;
                color: #ffd900;
                align-items: center;
              }
            }


            img {
              margin: 0 15rpx;
              height: 90%;
            }


          }

          .right {
            .right {}
          }
        }

      }
    }

    .music {

      height: 300rpx;

      .music_list {
        .music_item {
          width: 80%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 40rpx;
          font-size: 33rpx;
          margin: 10rpx 0;
          margin-top: 15rpx;
        }
      }
    }
  }

  .uni-actionsheet__menu {
    .uni-actionsheet__title {}
  }

  .fin_bottom {
    margin: 15rpx 0;
    text-align: center;
    color: #bebebe;
  }
</style>
